<template>
    <a-watermark class="screen" :content="content" :font="font">
        <dark v-if="isDark" />
        <default v-else />
    </a-watermark>
</template>
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useFormatStore, useUserinfoStore } from '@iframe/tools/store'
import Dark from './Dark/index.vue'
import Default from './Default/index.vue'

const userinfoStore = useUserinfoStore()
const { getUserinfo } = storeToRefs(userinfoStore)
const formatStore = useFormatStore()

const content = computed(() => {
    return `${getUserinfo.value.realname}(${getUserinfo.value.username})`
})

const font = {
    color: 'rgba(0,0,0,0.05)'
}

const isDark = computed(() => {
    return formatStore.getStyle === 'dark'
})
</script>
<style>
.screen {
    position: fixed;
    width: 100%;
    height: 100%;
}
</style>
